<script setup>
// 系统管理列表数据
import { computed, getCurrentInstance, ref } from 'vue';
import { copyTpl, deleteTpl, deleteTplSettingById, getAdminTpl } from '@/api/tpl.js';
import FontSet from '@/views/personalCenter/components/systemModule/components/fontSet/fontSet.vue';
import RelateContent from '@/views/personalCenter/components/systemModule/components/relateContent/relateContent.vue';
import AddTplDialog from '@/views/personalCenter/components/tplAdd/components/addTplDialog/addTplDialog.vue';
import { downloadByUrl } from '@/utils/assets.js';

const { VITE_INTERFACE_DOMAIN } = import.meta.env;
const instance = getCurrentInstance();
const { $message } = instance.appContext.config.globalProperties;

const tableData = ref([]);
const pageSize = ref(10);
const currentPage = ref(1);
const total = ref(0);
const columns = [
  { prop: 'tplName', label: '模板名称' },
  { prop: 'typeName', label: '模板类别' },
  { prop: 'operate', label: '操作', slot: true, minWidth: 200 },
];

async function getTplData() {
  const returnData = await getAdminTpl({
    pageSize: pageSize.value,
    pageNum: currentPage.value,
  });
  if (returnData?.code === 200) {
    console.log(returnData);
    tableData.value = returnData.rows;
    total.value = returnData.total;
  }
}
function paginationChange() {
  getTplData();
}
getTplData();
// 删除模版
async function tplDelete(item) {
  const returnData = await deleteTpl({ tplCode: item.tplCode });
  if (returnData?.code === 200) {
    $message.success('删除成功');
    await getTplData();
  } else {
    $message.error(returnData?.msg);
  }
}
// 复制
async function copy(item) {
  const formData = new FormData();
  formData.append('tplCode', item.tplCode);
  const returnData = await copyTpl(formData);
  if (returnData?.code === 200) {
    $message.success('复制成功');
    await getTplData();
  } else {
    $message.error(returnData?.msg);
  }
}
const tplCode = ref('');
// 字体设置
const fontSetDialog = ref(false);
function setFont(row) {
  fontSetDialog.value = true;
  tplCode.value = row.tplCode;
}
function fontSetClose() {
  fontSetDialog.value = false;
  getTplData();
}
// 期刊关联 | 论文关联
const relateContentDialog = ref(false);
const type = ref('');
function relateClick(value, row) {
  type.value = value;
  tplCode.value = row.tplCode;
  relateContentDialog.value = true;
}
const title = computed(() => {
  return type.value === 'paper' ? '论文关联' : '期刊关联';
});
function relateContentClose() {
  relateContentDialog.value = false;
  getTplData();
}
// 下载模板
function tplDownLoad(item) {
  const prefix = VITE_INTERFACE_DOMAIN.startsWith('http')
    ? VITE_INTERFACE_DOMAIN
    : `${window.location.origin}${VITE_INTERFACE_DOMAIN}`;
  downloadByUrl(`${prefix}/tpl/viewTplFile?tplCode=${item.tplCode}`, item.tplName);
}
// 编辑
const editData = ref({});
function editTpl(row) {
  editData.value = row;
  if (!showAddDialog.value) {
    showAddDialog.value = true;
  }
}
// 添加模版
// 添加弹窗
const showAddDialog = ref(false);
function addHandle() {
  editData.value = {};
  if (!showAddDialog.value) {
    showAddDialog.value = true;
  }
}
// 弹窗关闭
function closeDialog() {
  showAddDialog.value = false;
  getTplData();
}
</script>

<template>
  <div class="system-module-box">
    <el-table :data="tableData" border size="small">
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column :prop="item.prop" :label="item.label" :min-width="item.minWidth || 0">
          <template v-if="item.slot" #default="{ row }">
            <el-button type="text" @click="editTpl(row)">修改</el-button>
            <el-button type="text" @click="setFont(row)">设置</el-button>
            <el-button
              type="text"
              v-show="row.typeCode === 'qklw'"
              @click="relateClick('periodical', row)"
              >期刊关联</el-button
            >
            <el-button
              type="text"
              v-show="row.typeCode !== 'qklw'"
              @click="relateClick('paper', row)"
              >论文关联</el-button
            >
            <el-button type="text" @click="copy(row)">复制</el-button>
            <el-button type="text" @click="tplDownLoad(row)">下载</el-button>
            <el-button type="text" @click="tplDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="global-pagination-box">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="paginationChange"
      />
    </div>
    <div class="add-btn-box">
      <el-button type="primary" @click="addHandle">添加模版</el-button>
    </div>
  </div>
  <FontSet v-if="fontSetDialog" @close="fontSetClose" :tpl-code="tplCode" />
  <RelateContent
    v-if="relateContentDialog"
    @close="relateContentClose"
    :title="title"
    :tpl-code="tplCode"
    :type="type"
  />
  <AddTplDialog v-if="showAddDialog" @close="closeDialog" :edit-data="editData" />
</template>

<style scoped lang="less">
@import './systemModule.less';
</style>
